<template>
  <view>
    <view class="flex flex-row flex-row-center-start">
      <tm-icon
        @click="expandHandler(_item[props.fieldNames.id])"
        v-if="_item['children']"
        :font-size="26"
        :name="_checked ? expandedIconOpenIcon : expandedIconCloseIcon"
      ></tm-icon>
      <view :class="_item['children'] ? '' : 'pl-26'">
        <slot></slot>
      </view>
    </view>
    <view v-if="_item['children'] && _checked" class="pl-26">
      <base-node-vue @text-click="emits('textClick', $event)" :followTheme="props.followTheme" :fieldNames="props.fieldNames" :data="_item['children']"></base-node-vue>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { inject, computed, getCurrentInstance, ref, toRefs, toRaw, Ref, watch, watchEffect } from 'vue';
import baseNodeVue from './base-node.vue';
const emits = defineEmits(['textClick']);
import { baseNodeData } from './interface';
const { proxy } = getCurrentInstance();
const props = defineProps({
  followTheme: {
    type: [Boolean, String],
    default: true,
  },
  data: {
    type: Object,
    default: () => {},
    required: true,
  },
  /**
   * 数据结构字段的映射表。
   */
  fieldNames: {
    type: Object,
    default: () => {
      return {
        id: 'id',
        text: 'text',
      };
    },
  },
});

//父级方法。
let parent = proxy.$parent;

while (parent) {
  if (parent?.TreeParaentName == 'zhTree' || !parent) {
    break;
  } else {
    parent = parent?.$parent ?? undefined;
  }
}
const TreePareantSelectedExpandedId = inject('TreePareantSelectedExpandedId', ref([]));
const expandedIconOpenIcon = parent?.$props.expandedIconOpen ?? 'tm-icon-sort-down';
const expandedIconCloseIcon = parent?.$props.expandedIconClose ?? 'tm-icon-caret-right';
const _item = computed(() => <baseNodeData>props.data);
const _checked: Ref<string | number> = ref('');
function expandHandler() {
  _checked.value = _checked.value ? '' : _item.value[props.fieldNames.id];
  if (_checked.value) {
    parent?.onExpand({ data: toRaw(_item.value), expand: true });
  } else {
    parent?.onUnExpand({ data: toRaw(_item.value), expand: false });
  }
}
function isCheckedOpen(): void {
  let sAr = TreePareantSelectedExpandedId.value.filter((el: string | number) => el == _item.value[props.fieldNames.id]);
  _checked.value = sAr[0] ?? '';
}
watchEffect(() => isCheckedOpen());
function setStatus() {
  expandHandler(_item.value[props.fieldNames.id]);
}

defineExpose({ setStatus, filedId: _item.value[props.fieldNames.id] });
</script>
